<template>
  <div class="hootBox">
    <div class="box">
      <my-nav></my-nav>
      <!-- 面包屑导航 -->
      <div class="mbx">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>最新图书</el-breadcrumb-item>
          <el-breadcrumb-item>热门图书</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="border"></div>
      </div>
      <!-- 书籍列表 -->
      <div class="books">
        <div class="biaoti">
          <h3>热门图书浏览排行榜</h3>
        </div>
        <ul>
          <!-- 通过三目运算符 为左右两列表绑定不同的样式 -->
          <li
            v-for="(item, index) in lists"
            :key="index"
            :class="item.id % 2 == 0 ? 'tworight' : 'lie'"
          >
            <div class="img">
              <img :src="item.src" alt="" />
            </div>

            <div class="juti">
              <ul>
                <li>【作者】{{ item.zh }}</li>
                <li>【出版社】{{ item.cbs }}</li>
                <li>【ISBN】{{ item.isbn }}</li>
                <li>【馆藏地】{{ item.gcd }}</li>
                <li>【浏览次数】{{ item.ll }}</li>
                <li><button>我要借阅</button></li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="fenye">
        <el-pagination background layout="prev, pager, next" :total="50">
        </el-pagination>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>



<script>
import myNav from "../components/nav";
import myFooter from "../components/footer";

export default {
  components: {
    myNav,
    myFooter,
  },
  data() {
    return {
      lists: [
        {
          id: 1,
          src: require("../assets/php.jpg"),
          zh: "明日科技",
          cbs: "清华大学出版社",
          isbn: "9787302457220",
          gcd: "科学/软件",
          ll: "500",
        },
        {
          id: 2,
          src: require("../assets/php.jpg"),
          zh: "明日科技",
          cbs: "清华大学出版社",
          isbn: "9787302457220",
          gcd: "科学/软件",
          ll: "500",
        },
        {
          id: 3,
          src: require("../assets/php.jpg"),
          zh: "明日科技",
          cbs: "清华大学出版社",
          isbn: "9787302457220",
          gcd: "科学/软件",
          ll: "500",
        },
        {
          id: 4,
          src: require("../assets/php.jpg"),
          zh: "明日科技",
          cbs: "清华大学出版社",
          isbn: "9787302457220",
          gcd: "科学/软件",
          ll: "500",
        },
        {
          id: 5,
          src: require("../assets/php.jpg"),
          zh: "明日科技",
          cbs: "清华大学出版社",
          isbn: "9787302457220",
          gcd: "科学/软件",
          ll: "500",
        },
        {
          id: 6,
          src: require("../assets/php.jpg"),
          zh: "明日科技",
          cbs: "清华大学出版社",
          isbn: "9787302457220",
          gcd: "科学/软件",
          ll: "500",
        },
      ],
    };
  },
};
</script>

<style >
.books > ul {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.hootBox .box {
  height: 1250px;
  background-color: #fff;
  position: relative;
}
.hootBox .border {
  border-bottom: 2px solid rgba(153, 151, 151, 0.5);
  margin-top: 20px;
}

.hootBox .mbx,
.books {
 
  width: 1200px;
  margin: 0 auto;
}
.books .biaoti {
  font-size: 20px;
}
.hootBox .el-breadcrumb {
  padding-top: 30px;
}
.hootBox .mbx .el-breadcrumb__inner {
  font-size: 20px;
}
/* lie */
.hootBox .books ul .lie {
  display: flex;
  flex-direction: row;
}
.hootBox .books ul .lie .img {
  width: 280px;
  height: 320px;
}
.books ul .lie img {
  width: 100%;
}
.hootBox .books ul .lie {
  margin-left: -30px;
}
.books ul .lie .juti li {
  padding-bottom: 10px;
  margin-left: -60px;
  font-size: 16px;
  margin-top: 10px;
}

/* towright */
.hootBox .books ul .tworight {
  display: flex;
  flex-direction: row;
  padding-left: 250px;
}
.hootBox .books ul .tworight .img {
  width: 280px;
  height: 320px;
}
.books ul .tworight img {
  width: 100%;
}
.hootBox .books ul .tworight {
  margin-left: -30px;
}
.books ul .tworight .juti li {
  padding-bottom: 10px;
  margin-left: -60px;
  font-size: 16px;
  margin-top: 10px;
}
.box .fenye .el-pagination{
  position: absolute;
  left: 1050px;
  bottom: 45px;
 
}
</style>